<template>
<div class="deliveryManage">
  <search-block>
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
      <el-button type="primary" @click="addRule">添加规则</el-button>
    </template>
    <el-form inline :model="model" @submit.native.prevent>
      <el-form-item label="规则名:">
        <el-input v-model="model.name" clearable></el-input>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="230">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-button type="primary" size="mini" @click="addRegion(row)">添加区域</el-button>
          <el-button type="primary" size="mini" @click="editRule(row)">编辑</el-button>
          <el-popconfirm
            title="是否确认删除该规则？"
            @confirm="delRule(row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <y-form
    v-model="forms.formModel"
    :visible.sync="forms.showForm"
    :title="forms.formTypeTitle[forms.formsType]"
    destroy-on-close
    width="50%"
    :form-attrs="forms.formAttrs"
    :columns="forms.formColumns"
    @ensure="ensureModel">
  </y-form>
  <el-dialog
    :visible.sync="priceForms.show"
    width="800px"
    v-if="priceForms.show"
    :title="'设置区域定价[' + priceForms.name + ']'"
    @closed="priceForms.ruleId = ''">
    <delivery-address-price
      :rule-id="priceForms.ruleId"></delivery-address-price>
  </el-dialog>
</div>
</template>

<script>
import deliveryAddressPrice from "./deliveryManageDetails/deliveryAddressPrice";
export default {
  name: "deliveryManage",
  components: { deliveryAddressPrice },
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.goods.deliveryRulePage,
        param: this.model
      }
    }
  },
  data() {
    return {
      model: {
        name: ''
      },
      columns: [
        {
          label: "规则名称",
          prop: "name"
        },
        {
          label: "起步阶梯数量(件)",
          prop: "startCount"
        },
        {
          label: "起步免邮数量(件)",
          prop: "freeCount"
        }
      ],
      forms: {
        formsType: '',
        formTypeTitle: {
          'ADD': '添加物流费用规则',
          'EDIT': '编辑物流费用规则'
        },
        formModel: {
          name: '',
          freeCount: '',
          startCount: ''
        },
        currentForm: null,
        showForm: false,
        formAttrs: {
          labelWidth: '130px',
          rules: {
            name: [{required: true, message: "请输入物流费用规则", trigger: "blur"}],
            freeCount: [
              {
                validator: (rule, value, callback) => {
                  if(value < this.forms.formModel.startCount){
                    callback(new Error('起步阶梯数量不得小于起步阶梯数量'));
                  }
                  callback();
                },
                trigger: 'blur'
              }
            ]
          }
        },
        formColumns: [
          {
            label: "规则名称",
            prop: "name",
            comp: {
              compType: 'input',
              attrs:{
                clearable: true,
                maxlength: 20,
                showWordLimit: true
              }
            }
          },
          {
            label: "起步阶梯数量(件)",
            prop: "startCount",
            comp:{
              compType: 'input-number',
              attrs:{
                stepStrictly: true
              }
            }
          },
          {
            label: "起步免邮数量(件)",
            prop: "freeCount",
            comp:{
              compType: 'input-number',
              attrs:{
                stepStrictly: true
              }
            }
          }
        ]
      },
      priceForms:{
        show: false,
        name: '',
        ruleId: ''
      }
    }
  },
  methods:{
    resetForm(){
      Object.keys(this.forms.formModel).map(key => {
        this.forms.formModel[key] = this.forms.currentForm ? this.forms.currentForm[key] : '';
      })
    },
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    addRule(){
      this.forms.formsType = 'ADD';
      this.forms.currentForm = null;
      this.resetForm();
      this.forms.showForm = true;
    },
    editRule(row){
      this.forms.formsType = 'EDIT';
      this.forms.currentForm = row;
      this.resetForm();
      this.forms.showForm = true;
    },
    delRule(row){
      this.$yAxios({
        url: this.$api.goods.removeDeliveryRule,
        data:{
          id: row.id
        }
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
      })
    },
    addRegion(row){
      this.priceForms.ruleId = row.id;
      this.priceForms.name = row.name;
      this.priceForms.show = true
    },
    ensureModel(form){
      let newForm;
      if(this.forms.formsType === 'EDIT'){
        newForm = Object.assign({}, this.forms.currentForm, form);
      }else{
        newForm = form;
      }
      this.$yAxios({
        url: this.$api.goods.saveDeliveryRule,
        data: newForm,
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search(this.forms.formsType === 'ADD');
      })
    }
  }
}
</script>

<style scoped>

</style>